<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-10-18 21:50:02
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-11-11 15:37:42
-->
<template>
  <span :style="{ fontSize: size + 'px' }">
    <svg class="file-icon" aria-hidden="true">
      <use v-bind:xlink:href="'#' + iconName"></use>
    </svg>
  </span>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = defineProps({
  name: { type: String },
  size: { type: Number, default: 24 },
});

const iconName = computed(() => {
  let ext = props.name
    ? props.name.substring(props.name.lastIndexOf("."))
    : "";
  switch (ext?.toLowerCase()) {
    case ".doc":
    case ".docx":
      return "file-icon-word";
    case ".xls":
    case ".xlsx":
      return "file-icon-excel";
    case ".ppt":
    case ".pptx":
      return "file-icon-ppt";
    case ".png":
    case ".svg":
      return "file-icon-png";
    case ".bmp":
    case ".jpg":
    case ".jpej":
    case ".tif":
    case ".tiff":
    case ".webp":
      return "file-icon-jpg";
    case ".gif":
      return "file-icon-gif";
    case ".ai":
      return "file-icon-ai";
    case ".psd":
      return "file-icon-psd";
    case ".pdf":
      return "file-icon-pdf";
    case ".html":
    case ".htm":
    case ".xml":
    case ".cs":
    case ".vb":
    case ".java":
    case ".sql":
    case ".css":
    case ".yaml":
    case ".json":
    case ".js":
    case ".ts":
      return "file-icon-html";
    case ".mp3":
    case ".wma":
    case ".mp2":
    case ".wav":
      return "file-icon-mp3";
    case ".mp4":
    case ".wmv":
    case ".mpg":
    case ".avi":
    case ".rm":
    case ".rmvb":
    case ".mov":
    case ".mkv":
      return "file-icon-video";
    case ".zip":
    case ".rar":
    case ".7z":
    case ".gz":
      return "file-icon-zip";
    case ".txt":
      return "file-icon-txt";
    default:
      return "file-icon-txt";
  }
});
</script>

<style lang="less" scoped>
.file-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
